<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>堆快照查找分离DOM</h1>
      <div>
        <h2>什么是分离DOM</h2>
        <p>1.界面元素存活在DOM树上</p>
        <p>
          2.垃圾对象时的DMO节点(如果节点从当前dom树上脱离.而且在js代码中没有在引用)
        </p>
        <p>3.分离状态的DOM节点(如果节点从当前dom树上分离,但是js代码还引用着)</p>
        <p>4.这些就是存在内存泄漏</p>
      </div>
      <div>
        <h2>快照的使用</h2>
        <p>1.打开谷歌浏览器,打开开发者工具,选择Memory(内存),勾选第一个快照堆</p>
        <p>2.操作完页面,点击Take snapshot(拍照)</p>
        <p>3.检索Detached</p>
      </div>
      <button id="btn">add</button>
    </div>
    <script>
      var tmpEle;
      function fn() {
        console.log(123);
        var ul = document.createElement("ul");
        for (var i = 0; i < 10; i++) {
          var li = document.createElement("li");
          ul.appendChild(li);
        }
        tmpEle = ul;
        //清除堆无用内存
        tmpEle = null;
      }
      document.getElementById("btn").addEventListener("click", fn);
    </script>
  </body>
</html>
